<template>
  <div class="bg">
    <div>
      <el-select v-model="form.category" placeholder="种类">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <!-- <el-button style="margin: 10px" @click="searchTypeQues">确认</el-button> -->
      <el-input
        v-model="form.keyword"
        style="float: center; width: 200px"
        placeholder="请输入题干"></el-input>
      <el-button @click="searchTypeQues" style="float: center; margin: 5px"
        >确认</el-button
      >
      <el-button
        style="float: right"
        @click="
          dialogFormVisible = true
          clearForm()
        "
        >新建</el-button
      >

      <el-dialog title="新建题目" :visible.sync="dialogFormVisible">
        <el-form :model="dialogform">
          <el-form-item label="种类" :label-width="formLabelWidth">
            <el-select v-model="dialogform.category" placeholder="选择种类">
              <el-option label="接诊" value="A"></el-option>
              <el-option label="检验" value="B"></el-option>
              <el-option label="诊断" value="C"></el-option>
              <el-option label="治疗" value="D"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题干" :label-width="formLabelWidth">
            <el-input
              v-model="dialogform.content"
              autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="选项A" :label-width="formLabelWidth">
            <el-input
              v-model="dialogform.sectionA"
              autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="选项B" :label-width="formLabelWidth">
            <el-input
              v-model="dialogform.sectionB"
              autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="选项C" :label-width="formLabelWidth">
            <el-input
              v-model="dialogform.sectionC"
              autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="选项D" :label-width="formLabelWidth">
            <el-input
              v-model="dialogform.sectionD"
              autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="答案" :label-width="formLabelWidth">
            <el-select v-model="dialogform.answer" placeholder="选择答案">
              <el-option label="A" value="A"></el-option>
              <el-option label="B" value="B"></el-option>
              <el-option label="C" value="C"></el-option>
              <el-option label="D" value="D"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="
              dialogFormVisible = false
              submitDialog()
            "
            >确 定</el-button
          >
        </div>
      </el-dialog>
      <el-dialog title="题目详情" :visible.sync="dialogFormVisible2">
        <el-form :model="dialogform2">
          <el-form-item label="种类" :label-width="formLabelWidth">
            <el-input
              v-if="flag"
              v-model="dialogform2.category"
              autocomplete="off"
              :disabled="flag"></el-input>
            <el-select
              v-else
              v-model="dialogform2.category"
              placeholder="选择种类">
              <el-option label="接诊" value="A"></el-option>
              <el-option label="检验" value="B"></el-option>
              <el-option label="诊断" value="C"></el-option>
              <el-option label="治疗" value="D"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题干" :label-width="formLabelWidth">
            <el-input
              v-model="dialogform2.content"
              autocomplete="off"
              :disabled="flag"></el-input>
          </el-form-item>
          <el-form-item label="选项A" :label-width="formLabelWidth">
            <el-input
              v-model="dialogform2.sectionA"
              autocomplete="off"
              :disabled="flag"></el-input>
          </el-form-item>
          <el-form-item label="选项B" :label-width="formLabelWidth">
            <el-input
              v-model="dialogform2.sectionB"
              autocomplete="off"
              :disabled="flag"></el-input>
          </el-form-item>
          <el-form-item label="选项C" :label-width="formLabelWidth">
            <el-input
              v-model="dialogform2.sectionC"
              autocomplete="off"
              :disabled="flag"></el-input>
          </el-form-item>
          <el-form-item label="选项D" :label-width="formLabelWidth">
            <el-input
              v-model="dialogform2.sectionD"
              autocomplete="off"
              :disabled="flag"></el-input>
          </el-form-item>
          <el-form-item label="答案" :label-width="formLabelWidth">
            <el-input
              v-if="flag"
              v-model="dialogform2.answer"
              autocomplete="off"
              :disabled="flag"></el-input>
            <el-select
              v-else
              v-model="dialogform2.answer"
              placeholder="选择答案">
              <el-option label="A" value="A"></el-option>
              <el-option label="B" value="B"></el-option>
              <el-option label="C" value="C"></el-option>
              <el-option label="D" value="D"></el-option>
            </el-select>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible2 = false">取 消</el-button>
          <el-button
            type="primary"
            @click="
              dialogFormVisible2 = false
              handleChange()
            "
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>

    <div>
      <el-table :data="quesData" border stripe style="width: 100%">
        <el-table-column type="index" label="ID" width="180">
          <template scope="scope">
            <span>{{ (pageVal - 1) * 8 + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="category" label="种类" width="180">
        </el-table-column>
        <el-table-column prop="content" label="题干"> </el-table-column>
        <el-table-column prop="oper" label="操作">
          <template v-slot:default="scope">
            <el-button
              type="primary"
              plain
              size="mini"
              @click="
                dialogFormVisible2 = true
                flag = true
                handleCheck(scope.$index)
              ">
              查看信息
            </el-button>
            <el-button
              type="danger"
              @click="handleDelete(scope.$index)"
              plain
              size="mini">
              删除题目
            </el-button>
            <el-button
              type="success"
              plain
              size="mini"
              @click="
                dialogFormVisible2 = true
                flag = false
                handleCheck(scope.$index)
              ">
              修改题目
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        @prev-click="handleCurrentChange"
        @next-click="handleCurrentChange"
        hide-on-single-page
        :page-size="8"
        :total="totallength"
        style="float: right">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import { newQues } from '../../api/anindex'
import { getQues } from '../../api/anindex'
import { searchQues } from '../../api/anindex'
import { deleteQues } from '../../api/anindex'
import { updateQues } from '../../api/anindex'
export default {
  name: 'ques',
  data() {
    return {
      form: {
        category: '',
        keyword: '',
      },
      Id: {
        questionId: '',
      },
      pageForm: {
        pageNum: '0',
        pageSize: '1000',
      },
      options: [
        { value: 'A', label: '接诊' },
        { value: 'B', label: '检验' },
        { value: 'C', label: '诊断' },
        { value: 'D', label: '治疗' },
      ],
      dialogFormVisible: false,
      dialogFormVisible2: false,
      flag: true,
      dialogform: {
        content: '',
        sectionA: '',
        sectionB: '',
        sectionC: '',
        sectionD: '',
        category: '',
        answer: '',
      },
      dialogform2: {
        content: '',
        sectionA: '',
        sectionB: '',
        sectionC: '',
        sectionD: '',
        category: '',
        answer: '',
      },
      formLabelWidth: '120px',
      quesData: [],
      quesTotal: [],
      totallength: 8,
      pageVal: 1,
    }
  },
  created() {
    this.fetchQuestions()
  },
  methods: {
    handleCurrentChange(val) {
      console.log(val, 'val')
      this.pageVal = val
      this.quesData = this.quesTotal.slice(8 * (val - 1), 8 * (val - 1) + 8)
    },
    searchTypeQues() {
      if (this.form.category == '') {
        this.$message.error('请选择种类')
      } else {
        searchQues(this.form).then((res) => {
          if (res.data.code == '200') {
            this.quesTotal = res.data.data
            if (res.data.data != []) {
              this.quesData = this.quesTotal.slice(0, 8)
            } else {
              this.quesData = this.quesTotal
            }
            this.totallength = this.quesTotal.length
            // this.quesData = res.data.data
            console.log(this.quesData)
            this.$message.success('刷新成功！')
          }
        })
      }
    },
    clearForm() {
      this.dialogform = {
        content: '',
        sectionA: '',
        sectionB: '',
        sectionC: '',
        sectionD: '',
        category: '',
        answer: '',
      }
    },
    handleCheck(index) {
      this.dialogform2 = this.quesData[index]
    },
    handleChange() {
      updateQues(this.dialogform2).then((res) => {
        if (res.data.code == '200') {
          this.$message.success('更新成功')
          this.fetchQuestions()
        }
      })
    },
    handleDelete(index) {
      this.Id.questionId = this.quesData[index].questionId

      deleteQues(this.Id).then((res) => {
        console.log(res, 'delete')
        if (res.data.code == '200') {
          this.quesData.splice(index, 1)
          this.$message.success('删除成功！')
        } else if (res.data.code == 50000) {
          this.$message.error('删除失败：试题存在于试卷中')
        }
      })
    },
    fetchQuestions() {
      getQues(this.pageForm).then((res) => {
        console.log('555', res)
        // this.quesData = res.data.data
        this.quesTotal = res.data.data
        if (res.data.data != []) {
          this.quesData = this.quesTotal.slice(0, 8)
        } else {
          this.quesData = this.quesTotal
        }
        this.totallength = this.quesTotal.length
        console.log(this.quesData)
      })
    },
    submitDialog() {
      try {
        newQues(this.dialogform).then((res) => {
          console.log(res)
          if (res.data.code == '200') {
            this.$message.success('题目创建成功！')
            this.dialogFormVisible = false
            this.fetchQuestions() // 刷新题目列表
          }
        })
      } catch (error) {
        this.$message.error('题目创建失败：' + response.data.message)
      }
    },
  },
}
</script>
<style scoped>
.bg {
  color: blue;
}
::v-deep .el-input.is-disabled .el-input__inner {
  color: black !important;
}
</style>
